<template>
	<view class="content">
		<view class="info">
			<image :src="data.picture" mode=""></image>
			<view class="text">
				<text>￥ {{ data.deposit }}</text>
				<text>订单：{{ data.number }} -定金</text>
			</view>
		</view>
		<view class="list" style="padding-bottom: 26rpx;">
			<view class="list1">支付方式</view>
			<u-radio-group v-model="value" wrap @change="radioGroupChange">
				<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled" shape="square" active-color="#880000">
					{{ item.name }}
				</u-radio>
			</u-radio-group>
		</view>

		<view class="needToPay" @click="balPayment" v-if="!showCustServ">
			<text class="txt1">需支付 ￥{{ data.deposit }}</text>
			<text class="txt2">支付剩余时间</text>
			<u-count-down
				separator-size="24"
				font-size="24"
				:show-hours="false"
				:timestamp="timestamp"
				:separator="zh"
				:bg-color="transparent"
				separator-color="#ffffff"
				color="#ffffff"
			></u-count-down>
		</view>
		<view class="needToPay" v-else>
			<text class="txt1">联系客服</text>
			
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			oid: '', //订单
			uid: 0,
			data: {},
			paymentSts: 1, // 0 余额支付 1 微信支付

			list: [
				{
					name: '余额 : ',
					disabled: false
				},
				{
					name: '微信',
					disabled: false
				},
				{
					name: '其他支付',
					disabled: false
				}
			],

			value: '微信',
			timestamp: '',
			showCustServ:false
		};
	},
	onShow() {},
	onLoad(oid) {
		this.uid = uni.getStorageSync('uid');
		this.oid = oid.oid;
		this.payOrdr();
	},
	methods: {
		radioChange(e) {
			//console.log('e :>> ', e);
		},

		radioGroupChange(e) {
			if (e === '微信') {
				this.paymentSts = 1;
				this.showCustServ = false
			} else if( e.substr(0, 2) === '余额' ){
				
				this.paymentSts = 0;
				this.showCustServ = false
			}else {
				this.showCustServ = true
			}
		},
		// 支付订单的数据
		async payOrdr() {
			const res = await this.$u.post('api/car/car_pay_order', {
				oid: this.oid
			});

			if (!res.code) return uni.$showMsg();
			this.data = res.data;
			this.timestamp = res.data.pay_end_time - (+new Date() / 1000).toFixed();
			console.log(' this.timestamp :>> ', this.timestamp);
			this.list[0].name = this.list[0].name + res.data.money;
		},
		//正常订单支付
		async balPayment() {
			// 0 余额支付 1 微信支付
			if (this.paymentSts === 0) {
				const res = await this.$u.post('api/car/user_pay', {
					uid: uni.getStorageSync('uid'),
					oid: this.oid
				});

				uni.reLaunch({
					url: '../order'
				});
				uni.$showMsg(res.msg);
			} else {
				// 微信支付

				const res = await this.$u.post('api/wxpay/get_signature', {
					uid: uni.getStorageSync('uid'),
					oid: this.oid
				});
				
				console.log('res --------------:>> ', res);
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: res.timeStamp,
					nonceStr: res.nonceStr,
					package: res.package,
					signType: res.signType,
					paySign: res.paySign,
					success: function(res) {
						console.log('success:' + JSON.stringify(res));
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
					}
				});
			}
		}
	},
	filters: {
		capitalizee(mss) {
			let days = Math.floor(mss / (1000 * 60 * 60 * 24));
			let hours = Math.floor((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
			let minutes = Math.floor((mss % (1000 * 60 * 60)) / (1000 * 60));
			let seconds = Math.round((mss % (1000 * 60)) / 1000);
			//+ hours + "小时" + minutes + "分钟";
			return days + '天' + hours + '小时' + minutes + '分钟';
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	width: 100vw;
	height: 100vh;
	background-color: #000000;
	padding: 24rpx 20rpx;
	.info {
		width: 710rpx;
		height: 163rpx;
		margin: 0 auto;
		background: #2a2929;
		border-radius: 15rpx;
		padding: 19rpx 16rpx;
		display: flex;
		image {
			width: 208rpx;
			height: 124rpx;
		}
		.text {
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			margin-left: 43rpx;
			text:nth-child(1) {
				height: 23rpx;
				line-height: 23rpx;
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #dcdcdc;
			}
			text:nth-child(2) {
				height: 19rpx;
				font-size: 20rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #dcdcdc;
				line-height: 19rpx;
			}
		}
	}

	.list {
		width: 710rpx;
		//height: 447rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		background: #2a2929;
		border-radius: 15rpx;
		.list1 {
			height: 88rpx;
			padding: 26rpx 16rpx;

			font-size: 30rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #dcdcdc;

			border-bottom: 1rpx solid #737373;
		}
		/deep/.u-radio {
			height: 82rpx !important;
			// padding: 0  17rpx;
			font-size: 26rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #dcdcdc;
			border-bottom: 1rpx solid #737373;
		}
		/deep/.u-radio__icon-wrap {
			margin-right: 16rpx;
		}
		/deep/ .u-radio__label {
			width: 100%;
			margin:  0  17rpx !important;
			font-size: 26rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #dcdcdc;
			// line-height: 25rpx;
		}
	}
	.needToPay {
		position: fixed;
		left: 50%;
		bottom: 37rpx;
		transform: translateX(-50%);
		display: flex;
		align-items: center;
		justify-content: center;
		width: 710rpx;
		height: 126rpx;
		background: #880000;
		border-radius: 15rpx;
		margin: 0 atuo;
		.txt1 {
			height: 37rpx;
			font-size: 38rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #ffffff;
			line-height: 37rpx;
			margin-right: 52rpx;
		}
		.txt2 {
			height: 24rpx;
			font-size: 24rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #ffffff;
			line-height: 24rpx;
		}
	}
}
</style>
